<template>
  <el-container>
    <el-header style="height: auto;">
      <el-row>
        <el-col :xl="{ span: 4, push: 1 }">
          <h2>新建公告111</h2>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-form ref="saveInfo" :model="saveInfo" :rules="formRules">
        <el-row>
          <el-col :xl="{ span: 6, push: 1 }" :lg="{ span: 6, push: 1 }">
            <el-form-item label="标题:" label-width="90px" prop="title">
              <el-input size="small" v-model="saveInfo.title" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xl="{ span: 6, push: 1 }" :lg="{ span: 6, push: 1 }">
            <el-form-item label="内容:" label-width="90px" prop="contentText">
              <el-input size="small" v-model="saveInfo.contentText" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xl="{ span: 6, push: 1 }" :lg="{ span: 6, push: 1 }">
            <el-form-item label="发布次数:" label-width="90px" prop="sendNumber">
              <el-input size="small" v-model="saveInfo.sendNumber" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xl="{ span: 6, push: 1 }" :lg="{ span: 6, push: 1 }">
            <el-form-item label="截止日期:" label-width="90px" prop="expirationDate">
              <el-date-picker
                style="width: 100%;"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                v-model="saveInfo.expirationDate"
                @change="changeDate"
                placeholder="请选择截止日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xl="{ span: 6, push: 1 }" :lg="{ span: 6, push: 1 }">
            <el-form-item label="通知类型:" label-width="90px" prop="dictNoticeType">
              <el-select size="small" placeholder="请选择通知类型" style="width: 100%;" v-model="saveInfo.dictNoticeType">
                <el-option value="PC" label="PC端"></el-option>
                <el-option value="C" label="C端"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xl="{ span: 6, push: 1 }" :lg="{ span: 6, push: 1 }">
            <el-form-item label="操作:" label-width="90px" prop="channelCompanyId">
              <el-button size="small" v-if="!isExcelbutton" type="primary" @click="submitHandle('saveInfo')" :loading="loading"> 提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
    import {listChannelCompany, thirdAccountList,
    saveNotice,// 保存公告
     batchThirdInventoryForShuolang} from '@/api/getData'

    export default {
        name: "index",
        data() {
            return {
                loading: false,
                isExcelbutton: false,
                saveInfo:{
                  title:'',
                  contentText:'',
                  sendNumber:'',
                  expirationDate:'',
                  dictNoticeType:'',
                  clickNumber:'0'
                },
                form: {
                    channelCompanySelect: [],
                    accountSelect: [],
                    accountId: '',
                    channelCompanyId: '',
                    addArr: [],
                    cardNumberStart:'',
                },
                fileList: {
                    excel: ""
                },
                fileName:"",
                formRules: {
                  title: [
                    {required: true, message: '请输入公告标题', trigger: 'blur'}
                  ],
                  contentText: [
                    {required: true, message: '请输入公告内容', trigger: 'blur'}
                  ],
                  sendNumber: [
                    {required: true, message: '请输入发布次数', trigger: 'blur'}
                  ],
                  expirationDate: [
                    {required: true, message: '请选择截止日期', trigger: 'change'},
                  ],
                  dictNoticeType: [
                    {required: true, message: '请选择通知类型', trigger: 'change'},
                  ]
                }
            }
        },
        created() {
          // listChannelCompany().then(v => {
          //     this.form.channelCompanySelect = v.data;
          // })
        },
        methods: {
          changeDate(){

          },
            getFile(event) {
                var file = event.target.files;
                for (var i = 0; i < file.length; i++) {
                    //    上传类型判断
                    var imgName = file[i].name;
                    var idx = imgName.lastIndexOf(".");
                    if (idx != -1) {
                        var ext = imgName.substr(idx + 1).toUpperCase();
                        ext = ext.toLowerCase();
                        this.form.addArr.push(file[i]);
                    }
                }
            },

            keyChangeHandle(fileList) {
                if (fileList !== '') {
                    return false
                } else {
                    //console.log(fileList)

                    this.fileList.excel = this.$refs.key.files[0]
                    if (this.$refs.key.files[0] != null) {
                        this.fileName = this.$refs.key.files[0].name
                    }
                }
            },
            async getchannelCompanyId() {
                if (this.form.channelCompanyId == 10) {
                    this.isExcelbutton = true;
                } else {
                    this.isExcelbutton = false;
                }
                const a = await thirdAccountList({
                        channelCompanyId: this.form.channelCompanyId
                    }
                )
                if (a._result) {
                    this.form.accountSelect = a.data;
                }
            },
            excelChange() {

            },

            submitHandle(formName) {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  this.saveNoticeFunc()
                } else {
                  // console.log('error submit!!');
                  return false;
                }
              })

                // this.$message.warning("入库中！")
                // this.loading = true
                // saveNotice({
                //     accountId: this.form.accountId,
                //     cardNumberStart:this.form.cardNumberStart
                // }).then(v => {
                //     if (v.code == 10000) {
                //         this.$message.success("入库成功！")
                //         this.loading = false
                //     } else {
                //         this.$message.error("入库失败！")
                //     }
                // })
            },
            async saveNoticeFunc(){
              const returnData = await saveNotice(this.saveInfo)
              if(returnData._result){
                this.$message.success("提交成功")
              }
            },
            submitHandleForShuolang() {

                if (this.form.accountId == '') {
                    this.$message.error("请选择账号！")
                    return
                }
                //

                if(this.form.channelCompanyId == 10&&this.fileName==""){
                    this.$message.error("请选择文件")
                    return
                }
                this.$message.warning("入库中！")

                this.loading = true
                batchThirdInventoryForShuolang({
                    accountId: this.form.accountId,
                    file: this.fileList.excel
                }).then(v => {
                    if (v.code == 10000) {
                        this.$message.success("入库成功！")
                        this.loading = false
                    } else {
                        this.$message.error("入库失败！")
                    }

                })
            }

        },


    }
</script>

<style scoped>
  .file_upload_box {
    display: inline-block;
    width: 200px;
    height: auto;
    position: relative;
    overflow: hidden;
  }

  .file_upload_box input[type=file] {
    position: absolute;
    left: 0;
    top: 6px;
    width: 100px;
    line-height: 25px;
    opacity: 0;
    cursor: pointer;
  }

  .file_upload_box a {
    display: inline-block;
    width: 50%;
    line-height: 25px;
    text-align: center;
    font-family: "Microsoft yahei";
    background-color: #315baf;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
  }
</style>
